<template>
    <div class="loginBox">
        <div class="left">
            <div class="text">
                <h1>Sign in to</h1>
                <h1>Open the word</h1>
                <div class="toRegister">
                    <p>if you don't have an account</p>
                    <p>you can <a href="">Register here</a></p>
                </div>
            </div>
            <div class="colorDiv">
            </div>
        </div>
        <div class="right">
            <user-login :type="type" @changeType="changeType" class="rightLogin" v-if="type"/>
            <Regist class="rightLogin" @changeType="changeType" v-else></Regist>
            <!-- <span class="iconfont icon-geren"></span> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import UserLogin from "./components/userLogin.vue"
import Regist from "./components/regist.vue"
const type =ref(true)
const changeType = () =>{
  type.value = !type.value
  console.log(type.value);
}
</script>

<style lang="scss" scoped>
@import "@/views/login/style.scss"
</style>